<template>
  <div class="container">
    <VueEmoji ref="child" is-data-base @change="handleChange" style="margin: 10px;" />

    <div class="side">
      <h3>表情json :
        <pre>{{ emojiData }}</pre>
      </h3>
    </div>
    <el-divider />
    <el-button @click="handleClick">getPreferredSkinTone</el-button>
    <h3>{{ skin }}</h3>

    <el-divider />
    <div class="query">
      <el-input v-model="emojiName" />
      <el-button @click="search">search</el-button>
      <pre>
        {{ queryEmoji }}
      </pre>

      <!-- <el-button @click="anotherLog">anotherLog</el-button> -->
    </div>
  </div>
</template>

<script setup>
import { ref, toValue, unref, watchEffect, watch, toRef } from 'vue';
import VueEmoji from '../../components/emoji/VueEmoji.vue';
import { useDataBase, useQueryEmoji } from '../../components/emoji/hook';

const child = ref(null);
const skin = ref(null);
const emojiData = ref(null);
const emojiName = ref('');
const queryEmoji = ref('');

useDataBase();

const handleChange = (emoji) => {
  log(emoji);
  emojiData.value = emoji
}
const handleClick = async () => {
  skin.value = await child.value.database.getPreferredSkinTone();
  const number = await child.value.database.getEmojiByGroup(5);
  const query = await child.value.database.getEmojiBySearchQuery('嘿嘿')
  log(number, query)
}

const search = () => {
  const { result, loading } = useQueryEmoji(emojiName.value)
  queryEmoji.value = result;
}



</script>

<style lang="scss" scoped>
.side {
  width: 300px;
  height: 500px;
  display: inline-block;
  vertical-align: top;
  overflow: auto;
}

.query {
  padding-bottom: 50px;
}
</style>
